<template>
    <div :id="uploaderId" class="uploader">
        <div class="queueList">
            <div id="dndArea" class="placeholder">
                <div :id="filePickerId"></div>
                <p>或将图片拖到这里，单次最多可选300张</p>
            </div>
        </div>
        <div class="statusBar" style="display:none;">
            <div class="progress">
                <span class="text">0%</span>
                <span class="percentage"></span>
            </div><div class="info"></div>
            <div class="btns">
                <div :id="filePicker2Id"></div><div class="uploadBtn">开始上传</div>
            </div>
        </div>
    </div>
</template>
<script>
    // import ElUploadSortable from "el-upload-sortable";
    import {
        fetchUploadGroup,
        uploadSubmit,
        getUploadList,
        getUploadToken
    } from '../../api/sys'
    import { API_BASE_URL } from '@/config'
    import { getToken,removeToken } from '@/utils/auth'

    export default {
        name: 'pic-upload-do',
        props: {
            formData: Object
        },
        components: {
            // ElUploadSortable
        },
        watch: {
            formData: {
                immediate: true,
                handler (val) {
                    if(val && val.code && val.code != this.group) {
                        this.group = val.code;
                        console.log(val)

                        this.initUploader();
                    }
                    // console.log("aaa");
                }
            }
        },
        data() {
            return {
                token: "",
                uploader: null,
                uploaderId: "uploader",
                filePickerId: "filePicker",
                filePicker2Id: "filePicker2",
                group: "default"
            }
        },
        created() {
            this.ext = Math.random().toString(36).substr(2, 9);
            this.uploaderId = "uploader" + this.ext;
            this.filePickerId = "filePicker" + this.ext;
            this.filePicker2Id = "filePicker2" + this.ext;
            this.token = getToken();

            setTimeout(()=>{
                this.initUploader();
            }, 500);
        },
        methods: {
            initUploader() {
                var vm = this;
                var $wrap = $('#' + this.uploaderId);
                var $queue = $('<ul class="filelist"></ul>')
                    .appendTo( $wrap.find('.queueList') );
                var $statusBar = $wrap.find('.statusBar');
                var $info = $statusBar.find('.info');
                var $upload = $wrap.find('.uploadBtn');
                var $placeHolder = $wrap.find('.placeholder');
                var $progress = $statusBar.find('.progress').hide();
                var fileCount = 0;
                var fileSize = 0;
                var ratio = window.devicePixelRatio || 1;
                var thumbnailWidth = 110 * ratio;
                var thumbnailHeight = 110 * ratio;
                var state = 'pedding';
                var percentages = {};
                var supportTransition = (function(){
                    var s = document.createElement('p').style,
                        r = 'transition' in s ||
                            'WebkitTransition' in s ||
                            'MozTransition' in s ||
                            'msTransition' in s ||
                            'OTransition' in s;
                    s = null;
                    return r;
                })();
                if ( !WebUploader.Uploader.support() ) {
                    alert( 'Web Uploader 不支持您的浏览器！如果你使用的是IE浏览器，请尝试升级 flash 播放器');
                    throw new Error( 'WebUploader does not support the browser you are using.' );
                }
                let formData = {
                    "mediaType": "image"
                };
                var uploader = WebUploader.create({
                    pick: {
                        id: '#' + vm.filePickerId,
                        label: '点击选择图片'
                    },
                    formData: $.extend(formData, {'group': this.group }),
                    dnd: '#' + this.uploaderId + ' .queueList',
                    paste: document.body,

                    accept: {
                        title: 'Images',
                        extensions: 'gif,jpg,jpeg,bmp,png,jpeg',
                        mimeTypes: 'image/*'
                    },

                    // swf文件路径
                    swf: "<%= BASE_URL %>webuploader/Uploader.swf",

                    disableGlobalDnd: true,
                    duplicate: true,

                    chunked: false,
                    threads:1,
                    server: API_BASE_URL + "backend/files/upload",
                    fileNumLimit: 300,
                    fileSizeLimit: 300 * 1024 * 1024,    // 200 M
                    fileSingleSizeLimit: 200 * 1024 * 1024    // 50 M
                });

                uploader.addButton({
                    id: '#' + vm.filePicker2Id,
                    label: '继续添加'
                });

                function addFile( file ) {
                    var $li = $( '<li id="' + file.id + '">' +
                        '<p class="title">' + file.name + '</p>' +
                        '<p class="imgWrap"></p>'+
                        '<p class="progress"><span></span></p>' +
                        '</li>' ),

                        $btns = $('<div class="file-panel">' +
                            '<span class="cancel">删除</span>' +
                            '<span class="rotateRight">向右旋转</span>' +
                            '<span class="rotateLeft">向左旋转</span></div>').appendTo( $li ),
                        $prgress = $li.find('p.progress span'),
                        $wrap = $li.find( 'p.imgWrap' ),
                        $info = $('<p class="error"></p>'),

                        showError = function( code ) {
                            switch( code ) {
                                case 'exceed_size':
                                    text = '文件大小超出';
                                    break;

                                case 'interrupt':
                                    text = '上传暂停';
                                    break;

                                default:
                                    text = '上传失败，请重试';
                                    break;
                            }

                            $info.text( text ).appendTo( $li );
                        };

                    if ( file.getStatus() === 'invalid' ) {
                        showError( file.statusText );
                    } else {
                        // @todo  lazyload
                        $wrap.text( '预览中' );
                        uploader.makeThumb( file, function( error, src ) {
                            if ( error ) {
                                $wrap.text( '不能预览' );
                                return;
                            }

                            var img = $('<img src="'+src+'">');
                            $wrap.empty().append( img );
                        }, thumbnailWidth, thumbnailHeight );

                        percentages[ file.id ] = [ file.size, 0 ];
                        file.rotation = 0;
                    }

                    file.on('statuschange', function( cur, prev ) {
                        if ( prev === 'progress' ) {
                            $prgress.hide().width(0);
                        } else if ( prev === 'queued' ) {
                            $li.off( 'mouseenter mouseleave' );
                            $btns.remove();
                        }

                        // 成功
                        if ( cur === 'error' || cur === 'invalid' ) {
                            console.log( file.statusText );
                            showError( file.statusText );
                            percentages[ file.id ][ 1 ] = 1;
                        } else if ( cur === 'interrupt' ) {
                            showError( 'interrupt' );
                        } else if ( cur === 'queued' ) {
                            percentages[ file.id ][ 1 ] = 0;
                        } else if ( cur === 'progress' ) {
                            $info.remove();
                            $prgress.css('display', 'block');
                        } else if ( cur === 'complete' ) {
                            $li.append( '<span class="success"></span>' );
                        }

                        $li.removeClass( 'state-' + prev ).addClass( 'state-' + cur );
                    });

                    $li.on( 'mouseenter', function() {
                        $btns.stop().animate({height: 30});
                    });

                    $li.on( 'mouseleave', function() {
                        $btns.stop().animate({height: 0});
                    });

                    $btns.on( 'click', 'span', function() {
                        var index = $(this).index(),
                            deg;

                        switch ( index ) {
                            case 0:
                                uploader.removeFile( file );
                                return;

                            case 1:
                                file.rotation += 90;
                                break;

                            case 2:
                                file.rotation -= 90;
                                break;
                        }

                        if ( supportTransition ) {
                            deg = 'rotate(' + file.rotation + 'deg)';
                            $wrap.css({
                                '-webkit-transform': deg,
                                '-mos-transform': deg,
                                '-o-transform': deg,
                                'transform': deg
                            });
                        } else {
                            $wrap.css( 'filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ (~~((file.rotation/90)%4 + 4)%4) +')');
                            // use jquery animate to rotation
                            // $({
                            //     rotation: rotation
                            // }).animate({
                            //     rotation: file.rotation
                            // }, {
                            //     easing: 'linear',
                            //     step: function( now ) {
                            //         now = now * Math.PI / 180;

                            //         var cos = Math.cos( now ),
                            //             sin = Math.sin( now );

                            //         $wrap.css( 'filter', "progid:DXImageTransform.Microsoft.Matrix(M11=" + cos + ",M12=" + (-sin) + ",M21=" + sin + ",M22=" + cos + ",SizingMethod='auto expand')");
                            //     }
                            // });
                        }


                    });

                    $li.appendTo( $queue );
                }

                function removeFile( file ) {
                    var $li = $('#'+file.id);

                    delete percentages[ file.id ];
                    updateTotalProgress();
                    $li.off().find('.file-panel').off().end().remove();
                }

                function updateTotalProgress() {
                    var loaded = 0,
                        total = 0,
                        spans = $progress.children(),
                        percent;

                    $.each( percentages, function( k, v ) {
                        total += v[ 0 ];
                        loaded += v[ 0 ] * v[ 1 ];
                    } );

                    percent = total ? loaded / total : 0;

                    spans.eq( 0 ).text( Math.round( percent * 100 ) + '%' );
                    spans.eq( 1 ).css( 'width', Math.round( percent * 100 ) + '%' );
                    updateStatus();
                }

                function updateStatus() {
                    var text = '', stats;

                    if ( state === 'ready' ) {
                        text = '选中' + fileCount + '张图片，共' +
                            WebUploader.formatSize( fileSize ) + '。';
                    } else if ( state === 'confirm' ) {
                        stats = uploader.getStats();
                        if ( stats.uploadFailNum ) {
                            text = '已成功上传' + stats.successNum+ '张图片，'+
                                stats.uploadFailNum + '张图片上传失败，<a class="retry" href="#">重新上传</a>失败图片或<a class="ignore" href="#">忽略</a>'
                        }

                    } else {
                        stats = uploader.getStats();
                        text = '共' + fileCount + '张（' +
                            WebUploader.formatSize( fileSize )  +
                            '），已上传' + stats.successNum + '张';

                        if ( stats.uploadFailNum ) {
                            text += '，失败' + stats.uploadFailNum + '张';
                        }
                    }

                    $info.html( text );
                }

                function setState( val ) {
                    var file, stats;

                    if ( val === state ) {
                        return;
                    }

                    $upload.removeClass( 'state-' + state );
                    $upload.addClass( 'state-' + val );
                    state = val;

                    switch ( state ) {
                        case 'pedding':
                            $placeHolder.removeClass( 'element-invisible' );
                            $queue.parent().removeClass('filled');
                            $queue.hide();
                            $statusBar.addClass( 'element-invisible' );
                            uploader.refresh();
                            break;

                        case 'ready':
                            $placeHolder.addClass( 'element-invisible' );
                            $( '#' + vm.filePicker2Id ).removeClass( 'element-invisible');
                            $queue.parent().addClass('filled');
                            $queue.show();
                            $statusBar.removeClass('element-invisible');
                            uploader.refresh();
                            break;

                        case 'uploading':
                            $( '#' + vm.filePicker2Id ).addClass( 'element-invisible' );
                            $progress.show();
                            $upload.text( '暂停上传' );
                            break;

                        case 'paused':
                            $progress.show();
                            $upload.text( '继续上传' );
                            break;

                        case 'confirm':
                            $progress.hide();
                            $upload.text( '开始上传' ).addClass( 'disabled' );

                            stats = uploader.getStats();
                            if ( stats.successNum && !stats.uploadFailNum ) {
                                setState( 'finish' );
                                return;
                            }
                            break;
                        case 'finish':
                            stats = uploader.getStats();
                            if ( stats.successNum ) {
                                fileCount = 0;
                                percentages = [];
                                $upload.removeClass("disabled");
                                $queue.empty();
                                updateTotalProgress();
                                $placeHolder.removeClass( 'element-invisible' );
                                $queue.parent().removeClass('filled');
                                $queue.hide();
                                $statusBar.addClass( 'element-invisible' );
                                uploader.refresh();

                                vm.$emit('finish');
                                // alert( '上传成功' );
                            } else {
                                // 没有成功的图片，重设
                                state = 'done';
                                location.reload();
                            }
                            break;
                    }

                    updateStatus();
                }

                uploader.onUploadProgress = function( file, percentage ) {
                    var $li = $('#'+file.id),
                        $percent = $li.find('.progress span');

                    $percent.css( 'width', percentage * 100 + '%' );
                    percentages[ file.id ][ 1 ] = percentage;
                    updateTotalProgress();
                };

                uploader.onFileQueued = function( file ) {
                    fileCount++;
                    fileSize += file.size;

                    if ( fileCount === 1 ) {
                        $placeHolder.addClass( 'element-invisible' );
                        $statusBar.show();
                    }

                    addFile( file );
                    setState( 'ready' );
                    updateTotalProgress();
                };

                uploader.onFileDequeued = function( file ) {
                    fileCount--;
                    fileSize -= file.size;

                    if ( !fileCount ) {
                        setState( 'pedding' );
                    }

                    removeFile( file );
                    updateTotalProgress();

                };
                uploader.on( 'uploadSuccess', function( file, response ) {
                    // all_files.push(response.data);
                });

                uploader.on( 'uploadBeforeSend', function( obj,data, headers ) {
                    $.extend(headers, {
                        "Authorization": "Bearer " + vm.token
                    });
                });

                uploader.on( 'all', function( type ) {
                    var stats;
                    switch( type ) {
                        case 'uploadFinished':
                            setState( 'confirm' );
                            break;

                        case 'startUpload':
                            setState( 'uploading' );
                            break;

                        case 'stopUpload':
                            setState( 'paused' );
                            break;

                    }
                });

                uploader.onError = function( code ) {
                    vm.$message.error("上传失败，请重试！");
                };

                $upload.on('click', function() {
                    if ( $(this).hasClass( 'disabled' ) ) {
                        return false;
                    }

                    if ( state === 'ready' ) {
                        uploader.upload();
                    } else if ( state === 'paused' ) {
                        uploader.upload();
                    } else if ( state === 'uploading' ) {
                        uploader.stop();
                    }
                });

                $info.on( 'click', '.retry', function() {
                    uploader.retry();
                } );

                $info.on( 'click', '.ignore', function() {
                    // alert( 'todo' );
                } );

                $upload.addClass( 'state-' + state );
                updateTotalProgress();


                this.uploader = uploader;
            },
        }
    }
</script>